{header}
<script type="text/javascript">
  var file_list = [];
  var remove_file_list = [];
  var is_upload_success_list = [];
</script>
<link rel="stylesheet" type="text/css" href="/static/plugins/webuploader-0.1.5/webuploader.css">
<script type="text/javascript" src="/static/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<div class="card">
  <div class="card-header">
    操作
  </div>
  <div class="card-body">
    <button type="button" class="btn btn-primary" id="save">保存</button>
  </div>
</div>
<form>
  <div class="form-group">
    <label for="movie-name">电影名称</label>
    <input type="text" class="form-control" id="movie-name" aria-describedby="movie-name">
  </div>
  <div class="form-group">
    <label for="movie-year">电影年份</label>
    <input type="number" class="form-control" id="movie-year" aria-describedby="movie-year">
  </div>
  <div class="form-group">
    <label for="movie-link">西瓜视频链接</label>
    <input type="text" class="form-control" id="movie-link" aria-describedby="movie-link">
  </div>
  <div class="form-group" id="type_list">
    <label for="movie-year">类型</label>
    <button class="btn btn-outline-secondary" type="button" onclick="add_type()">+</button>
  </div>
  <script type="text/javascript">
    var type_max = 0;
    var type_list = [];
    function add_type() {
      ++type_max;
      type_list.push(type_max);
      $('#type_list').append('<div class="input-group" id="type' + type_max + '"><input type="text" class="form-control" id="input' + type_max + '"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" onclick="remove_type(' + type_max + ')">-</button></div></div>');
    }
    function remove_type(type_id) {
      $('#type' + type_id).remove();
      type_list.splice(type_list.indexOf(type_id), 1);
    }
  </script>
  <div id="uploader" class="wu-example">
    <label>迅雷种子</label>
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
    </div>
  </div>
  <ul class="list-group" id="upload_list">
  </ul>
  <script type="text/javascript">
    var uploader = WebUploader.create({
        // swf文件路径
        swf: '{base_url}static/plugins/webuploader-0.1.5/Uploader.swf',
        // 文件接收服务端。
        server: '{base_url}library/bt_file_upload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });
    function remove_file(file_id, exist_file_name, file_name) {
      if (file_id !== 0) {
        uploader.removeFile(file_id, true);
      }
      if (exist_file_name !== '') {
        remove_file_list.push(exist_file_name);
      }
      $('#upload_list #' + file_name).remove();
    }
    uploader.on('fileQueued', function (file) {
      var ul = $('#upload_list');
      var name = file.name.replace(/[\.#!@$%\^\&\(\)]/, '_');
      var li = $('<li class="list-group-item d-flex justify-content-between align-items-center" id="' + name + '">' + file.name + '<span class="badge badge-primary" id="' + file.id + '">待上传</span><a class="badge badge-danger" href="javascript:void(0);" onclick="remove_file(\'' + file.id + '\', \'\', \'' + name + '\')">删除</a></li>');
      ul.append(li);
    });
    uploader.on('uploadProgress', function (file, progress) {
      var li = $('#' + file.id);
      li.html(parseInt(progress * 100) + '%');
    });
    uploader.on('uploadError', function (file, reason) {
      is_upload_success_list[file.id] = false;
      console.error(reason);
      var file_id = $('#' + file.id);
      file_id.removeClass('badge-primary');
      file_id.addClass('badge-danger');
      file_id.html('上传失败');
    });
    uploader.on('uploadSuccess', function (file, response) {
      console.log(response._raw);
      var data = response._raw.split(':');
      if (data.length !== 2) {
        is_upload_success_list[file.id] = false;
        layer.alert('服务器返回非法数据', {icon: 2});
        return;
      }
      var file_id = $('#' + file.id);
      if (data[0] === 'fail') {
        is_upload_success_list[file.id] = false;
        file_id.removeClass('badge-primary');
        file_id.addClass('badge-danger');
        file_id.html('上传失败');
        console.error(file.id + '上传失败:' + data[1]);
      } else if (data[0] === 'success') {
        is_upload_success_list[file.id] = true;
        file_list.push(data[1]);
        file_id.html('上传成功');
      } else {
        is_upload_success_list[file.id] = false;
        layer.alert('服务器返回多余数据', {icon: 2});
      }
    });
    uploader.on('uploadFinished', function () {
      for (var is_all_success in is_upload_success_list) {
        if (!is_all_success) {
          layer.alert('有文件上传失败，无法提交记录', {icon: 2});
          return;
        }
      }
      var list = file_list.join('|');
      var save = $('#save');
      save.attr('disabled', true);
      var movie_name = $('#movie-name').val();
      var movie_year = $('#movie-year').val();
      var movie_link = $('#movie-link').val();
      var type_str = '';
	  var type_array = [];
      for (var i in type_list) {
        type_array.push($('#input' + type_list[i]).val());
      }
	  type_str = type_array.join(',');
      $.ajax({
        url: '{base_url}library/upload_topic',
        type: 'post',
        data: {
          movie_name: movie_name,
          movie_year: movie_year,
          movie_link: movie_link,
          file_list: list,
          type_str: type_str
        },
        success: function (data) {
          console.log(data);
          var d = data.split(':');
          save.attr('disabled', false);
          if (d.length !== 2) {
            console.error(data);
            layer.alert('服务器返回非法数据', {icon: 2});
            return;
          }
          if (d[0] === 'fail') {
            layer.alert('上传失败:' + d[1], {icon: 2});
            console.error('上传失败:' + d[1]);
          } else if (d[0] === 'success') {
            location.href = '{base_url}topic_list?p=1';
          } else {
            console.error(data);
            layer.alert('服务器返回多余数据', {icon: 2});
          }
        },
        error: function (data) {
          layer.alert('上传失败', {icon: 2});
          console.error(data.responseText);
        }
      });
    });
    $(function () {
      $('#save').on('click', function () {
        if (type_list.length === 0) {
          layer.alert('至少要有一个类型', {icon: 0});
          return;
        }
        var type_str = '';
        for (var i in type_list) {
          type_str += $('#input' + type_list[i]).val();
        }
        var movie_name = $('#movie-name').val();
        var movie_year = $('#movie-year').val();
        var movie_link = $('#movie-link').val();
        if (movie_name === '' || movie_year === '' || movie_link === '') {
          layer.alert('表单不能有空', {icon: 0});
          return;
        } else if (movie_name.indexOf('\'') !== -1 || movie_name.indexOf('"') !== -1 ||
          movie_year.indexOf('\'') !== -1 || movie_year.indexOf('"') !== -1 ||
          type_str.indexOf('\'') !== -1 || type_str.indexOf('"') !== -1 ||
          movie_link.indexOf('\'') !== -1 || movie_link.indexOf('"') !== -1) {
          layer.alert('表单不能含有引号', {icon: 0});
          return;
        }
        uploader.upload();
      });
    });
  </script>
</form>
{footer}

